<template>

    <div class="login-box">
        <div class="content">
            <p>
                用户登录页面
            </p>
            <p>
                <el-input prefix-icon="el-icon-user my-icon" v-model="query.id" placeholder="请输入用户账号"></el-input>
            </p>
            <p>
                <el-input prefix-icon="el-icon-lock" type="password" v-model="query.password" placeholder="请输入用户密码"></el-input>
            </p>
            <p>
                <el-checkbox fill="" v-model="remember">记住密码</el-checkbox>
            </p>
            <p>
                <el-button @click="loginEvt" type='info' >登录</el-button>
            </p>
        </div>
    </div>
</template>

<script>
import { LOGIN_FLAG } from '@/config/common.conf'
import { deCodeApi, enCodeApi, md5Api } from '@/util'
import { getMenuListApi, getUserInfoApi, loginApi } from '@/apis/loginApi'
import { rangeListApi } from '@/apis/productApi'
import { shopListApi } from '@/apis/shopApi'
import {userListApi} from '@/apis/userApi'
export default {
    data() {
        return {
            query: {
                "id": "",
                "password": ""
            },
            remember: false
        }
    },

    created() {
        let cache = localStorage.getItem('login-info')
        if (!!cache) {
            try {
                cache = deCodeApi(cache).split('----')
                this.query.id = cache[0]
                this.query.password = cache[1]
                this.remember = true
            } catch {
                localStorage.removeItem('login-info')
            }
        }
    },

    methods: {
        async loginEvt() {
            rangeListApi({page:1,size:200,name:''}).then(d=>{
                if(d.code===200)
                {
                    this.$store.commit('common/setRangeInfo',d)
                }
            }).catch(e=>{
                console.log(e)
            })
            let result = await loginApi({
                ...this.query,
                password: md5Api(this.query.password)
            })

            if (result.code !== 200) {
                this.$message.error('登录失败，原因：' + result.message)
                return
            }

            sessionStorage.setItem(LOGIN_FLAG, enCodeApi(result.token + '----' + Date.now()))
            this.$store.commit('common/setToken', result.token)

            let user = await getUserInfoApi(this.query.id)
            if (user.code === 200) {
                this.$store.commit('common/setUserInfo', user.data)
            }

            let menu = await getMenuListApi()
            if (menu.code === 200) {
                this.$store.commit('common/setMenuList', menu.data.rows)
            }

            let shop = await shopListApi()
            if(shop.code === 200){
                this.$store.commit('common/setShopList',shop.data.rows)
            }

            let userList = await userListApi()
            console.log(userList)
            if(userList.code === 200){
                this.$store.commit('common/setUserList',userList.data.rows)
            }

            // 判断用户是否记住密码，如果记住密码需要缓存密码
            if (this.remember) {
                localStorage.setItem('login-info', enCodeApi(this.query.id + '----' + this.query.password))
            } else {
                localStorage.removeItem('login-info')
            }

            // 这里跳转页面太快，导致我们请求回来的菜单数据，还没有被监听到，并且被做成对应的路由
            // this.$router.push('/home')
            setTimeout(() => {
                this.$router.push('/home')
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        background: url('../../images/background.jpg') no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        > .content {
            top: 50%;
            left: 50%;
            color: white;
            display: block;
            position: absolute;
            width: 22.5vw;
            height: 330px;
            background: rgba(133, 130, 130, .4);
            margin: -165px  auto auto -11.25vw;
            // margin: auto auto;
            border: solid 1px white;
            border-radius: 10px;
            padding: 16px;
        }
        .el-input {
            width: 100%;
        }
        .el-checkbox{
            color: white;
        }
        .el-button{
            width: 100%;
            height: 5vh !important;
            margin-top: 2vh;
            line-height: 2vh;
            background: rgb(194, 190, 190);
            font-size: .8rem;
            opacity: .7;
            color: black;
            &:hover{
                background: black;
                color: white;
            }
        }
    }
</style>